<template>
	<view :style="skin" class="content dealDetail">
		<view class="dateBox flex-c-SB">
			<view class="dateArea">
				{{startDate}}
				<text v-if="startDate">~</text>
				{{endtDate}}
			</view>
			<view class="dateTabs">
				<u-tabs :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}" :list="listTabs" @click="clickTabsTime"></u-tabs>
			</view>
		</view>
		<view class="dealInfo flex-c-SB">
			<view class="dealList">
				<view class="dealTitle">
					{{$t('me.turnoverT')}}(MWK )
				</view>
				<view class="dealNum">
					{{moneyTran(moneyObj.amountTurnover) || 0}}
				</view>
			</view>

			<view class="dealList">
				<view class="dealTitle">
					{{$t('me.incomeT')}}(MWK )
				</view>
				<view class="dealNum">
					{{moneyTran(moneyObj.amountIncome) || 0}}
				</view>
			</view>

			<view class="dealList">
				<view class="dealTitle">
					{{$t('lease.onlineBalance')}}(MWK )
				</view>
				<view class="dealNum">
					{{moneyTran(moneyObj.amountOnline) || 0}}
				</view>
			</view>

			<view class="dealList">
				<view class="dealTitle">
					{{$t('lease.offlineBalance')}}(MWK )
				</view>
				<view class="dealNum">
					{{moneyTran(moneyObj.amountOffline) || 0}}
				</view>
			</view>
		</view>
		<u-tabs :scrollable="false" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}" :list="deaList" :current="actionIndex" @click="clickTabs"></u-tabs>
		<scroll-view refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @scrolltolower="toBottom" :style="{height: contentHeight}" :scroll-y="true"
			class="messageBox">

			<view class="infoList flex-c-SB" v-for="item in list" :key="item.id">
				<view class="photo">
					<image src="../../static/images/cat.png" mode="widthFix"></image>
				</view>
				<view class="infoRight flex-c-SB">
					<view class="p1">
						<view class="">
							<!-- {{setOpeCode(item.opeCode)}} -->
							{{item.opeDesc}}
						</view>
						<view class="p2">
							{{item.createTime}}
						</view>
						<view class="p2">
							{{$t('lease.onlineBalance')}}：{{moneyTran(item.onlineAmountAll)}} {{$t('lease.offlineBalance')}}：{{moneyTran(item.offlineAmountAll)}}
						</view>
					</view>
					<view v-if="actionIndex == 0">
						<view class="reduceMoney" v-if="item.opeCode == 'unlock_fail_back_offline' || item.opeCode == 'unlock_fail_back_online'">
							{{moneyTran(item.turnoverAmountOpe)}}
						</view>
						<view class="addMoney" v-else>
							+{{moneyTran(item.turnoverAmountOpe)}}
						</view>
					</view>
					<view class="" v-else-if="actionIndex == 1">
						<view class="reduceMoney" v-if="item.opeCode == 'unlock_fail_back_offline' || item.opeCode == 'unlock_fail_back_online'">
						{{item.incomeAmountOpe == '0'?'-':''}}{{moneyTran(item.incomeAmountOpe)}}
						</view>
						<view class="addMoney" v-else>
							+{{moneyTran(item.incomeAmountOpe)}}
						</view>


					</view>
					<view class="" v-else-if="actionIndex == 2">
						<view class="addMoney" v-if="item.opeCode == 'unlock_fail_back_online'">
							+{{moneyTran(item.turnoverAmountOpe)}}
						</view>
						<view class="reduceMoney" v-else>
							{{moneyTran(item.onlineAmountOpe)}}
						</view>


					</view>
					<view class="" v-else-if="actionIndex == 3">

					<view class="addMoney" v-if="item.opeCode == 'unlock_fail_back_offline'">
						+{{moneyTran(item.offlineAmountOpe)}}
					</view>
						<view class="reduceMoney" v-else>
							{{moneyTran(item.offlineAmountOpe)}}
						</view>


					</view>


				</view>
			</view>
			<p class="isMore" v-if="isMore">No More</p>

		</scroll-view>


		<u-calendar color="var(--subjectColor)" monthNum='12'  startText='Start' confirmDisabledText='confirm'  confirmText="confirm" endText="End" :allowSameDay="true" :show="calenShow" position="top" mode="range"  title="Date selection"
			@confirm="confirm" :minDate="data1" :maxDate="data" @close="calenShow = false"></u-calendar>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		gtTotal
	} from '@/api/balance.js'
	import {
		getNewYMD,
		getWeekDate,
		getMonthDate,
		getDayDate
	} from '@/utils/index.js'
	import {
		gtTurnoverPage,
		gtOnlinePage,
		gtOfflinePage,
		gtIncomePage
	} from '@/api/leaTrade.js'
	export default {
		data() {
			return {
				contentHeight: '0px',
				triggered: true,
				_freshing: false,
				isMore: false,
				calenShow: false,
				mode: 'multiple',
				data: new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1,
				data1: new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 180,
				moneyObj: {},
				startDate: getDayDate().startDate,
				endtDate: getDayDate().endDate,
				listTabs: [{
						name: this.$t('me.day'),

					},
					{
						name: this.$t('me.weekly'),

					},
					{
						name: this.$t('me.monthly'),
					},
					{
						name: this.$t('me.time'),
					}
				],

				deaList: [{
						name: this.$t('me.turnoverT'),

					},
					{
						name: this.$t('me.incomeT'),

					},
					{
						name: this.$t('lease.onlineBalance'),
					}, {
						name: this.$t('lease.offlineBalance'),

					}
				],

				list: [],
				size: 10,
				current: 1,

				actionIndex: 0,
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			}),
		},

		created() {
			let titleHeight = uni.getSystemInfoSync().statusBarHeight + 200 + 'px'
			this.contentHeight = `calc(100% - ${titleHeight})`
		},
		onLoad(options) {
			console.log(options);
			this.actionIndex = options?.tabIndex || 0
			this.getToalData(0)
			this.getTrunOverList()
			this.getOffMoney()
		},
		methods: {
			// 营业额
			getTrunOverList() {
				console.log(this.size);
				gtTurnoverPage({
					size: this.size,
					current: this.current
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						if (this.size > res.data.total) {
							this.isMore = true
						}
						this.list = res.data.records

					} else {
						this.list = []
						this.isMore = true
					}

				})
			},
			// 在线
			getOnLineList() {
				gtOnlinePage({
					size: this.size,
					current: this.current
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						console.log(this.size > res.data.total);
						if (this.size > res.data.total) {
							this.isMore = true
						}
						this.list = res.data.records

					} else {
						this.list = []
						this.isMore = true
					}

				})
			},
			// 离线
			getOfflineList() {
				gtOfflinePage({
					size: this.size,
					current: this.current
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						console.log(this.size > res.data.total);
						if (this.size > res.data.total) {
							this.isMore = true
						}
						this.list = res.data.records

					} else {
						this.list = []
						this.isMore = true
					}
				})
			},
			// 收入
			getInComeList() {
				gtIncomePage({
					size: this.size,
					current: this.current
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						console.log(this.size > res.data.total);
						if (this.size > res.data.total) {
							this.isMore = true
						}
						this.list = res.data.records

					} else {
						this.list = []
						this.isMore = true
					}
				})
			},
			moneyTran(m) {
				if (m) {
					return (m / 100).toFixed(2)
				} else {
					return 0
				}

			},
			getOffMoney() {
				gtTotal({
					startDate: '',
					endDate: ''
				}).then(res =>{
					if(res.code == 0){
						this.$set(this.moneyObj,'amountOnline',res.data.amountOnline);
						this.$set(this.moneyObj,'amountOffline',res.data.amountOffline);
					}
				})
				},
			getToalData(index) {
				console.log(this.startDate,this.endtDate);
				gtTotal({
					startDate: this.startDate,
					endDate: this.endtDate
				}).then(res => {
					if (res.code == 0) {
					
						this.$set(this.moneyObj,'amountTurnover',res.data.amountTurnover);
						this.$set(this.moneyObj,'amountIncome',res.data.amountIncome);
						// this.moneyObj.amountTurnover = res.data.amountTurnover
						// this.moneyObj.amountIncome = res.data.amountIncome
					}
				})
			},
			confirm(e) {
				console.log(e);
				this.startDate = e[0]
				this.endtDate = e[e.length - 1]
				this.calenShow = false
				this.getToalData()
			},
			clickTabs(item) {
				console.log(item);
				this.actionIndex = item.index
				this.isMore = false
				switch (item.index) {
					case 0:
						this.getTrunOverList();
						break;
					case 1:
						this.getInComeList();
						break;
					case 2:
						this.getOnLineList();
						break;
					case 3:
						this.getOfflineList();
						break;
				}
			},
			clickTabsTime(item) {
				console.log(item);
				if (item.index == 0) {
					this.startDate = getDayDate().startDate;
					this.endtDate = getDayDate().endDate;
					this.getToalData(item.index)
				} else if (item.index == 1) {
					this.startDate = getWeekDate().startDate
					this.endtDate = getWeekDate().endDate
					this.getToalData()
				} else if (item.index == 2) {
					this.startDate = getMonthDate().startDate
					this.endtDate = getMonthDate().endDate
					this.getToalData()
				} else if (item.index == 3) {
					this.calenShow = true
				}
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				// await this.getData()

				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1500)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				switch (this.actionIndex) {
					case 0:
						this.getTrunOverList();
						break;
					case 1:
						this.getInComeList();
						break;
					case 2:
						this.getOnLineList();
						break;
					case 3:
						this.getOfflineList();
						break;
				}
			},
			toBottom() {
				console.log('到达底部');
				if (this.isMore) return false
				this.size += 10
				switch (this.actionIndex) {
					case 0:
						this.getTrunOverList();
						break;
					case 1:
						this.getInComeList();
						break;
					case 2:
						this.getOnLineList();
						break;
					case 3:
						this.getOfflineList();
						break;
				}

				// this.getData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dealDetail {
		padding: 16px;
		box-sizing: border-box;

		.dateBox {
			background-color: #F7F8FA;

			.dateArea {
				font-size: 12px;
			}
		}

		.dealInfo {
			width: 100%;
			height: 136px;
			padding: 8px;
			box-sizing: border-box;
			flex-wrap: wrap;
			background-color: #fff;
			margin-top: 8px;

			.dealList {
				width: 106px;
				height: 60px;
				text-align: center;
				margin: 0 14px;
				.dealTitle {
					font-size: 14px;
					color: #101010;
					line-height: 20px;
				}

				.dealNum {
					font-size: 20px;
					color: #F53F3F;
					line-height: 28px;
				}

			}
		}

		.infoList {
			height: 78px;
			border-bottom: 1px solid #ccc;

			.photo {
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background-color: #F7F8FA;
				position: relative;

				image {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 24px;
					height: 24px;
				}
			}

			.infoRight {
				width: 270px;

				.reduceMoney {
					font-size: 16px;
					color: #101010;
				}

				.addMoney {
					font-size: 16px;
					color: #BD3124;
				}
			}

			.p1 {
				color: #101010;
				font-size: 14px;
			}

			.p2 {
				color: #A9AEB8;
				font-size: 12px;
			}

		}

		.isMore {
			width: 100%;
			height: 35px;
			text-align: center;
			line-height: 35px;
			margin-top: 8px;
			color: var(--subtopicNextTextColor);
		}
	}
</style>